<template>
  <div class="label-location" @click="locate">
    <span class="iconfont icondingwei"></span>
    <span class="txt">{{location}}</span>
  </div>
</template>

<script>
import { getConfig } from '../../api/wx'
import { getAddress } from '../../map'
import Wx from '../../wx'
export default {
  methods: {
    locate () {
      Wx.config(this.config).then(() => {
        Wx.location(res => {
          getAddress(res.latitude, res.longitude).then(res => {
            console.log(res)
          })
        })
      })
    }
  },
  created () {
    getConfig().then(res => {
      this.config = res.data
    })
  },
  data () {
    return {
      config: null
    }
  },
  props: {
    location: String
  }
}
</script>

<style scoped lang="stylus">
  .label-location
    height 40px
    background:rgba(255,255,255,1);
    box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
    border-radius:10px;
    padding 0 12px
    display flex
    align-items center
    .iconfont
      color #F9A528
      dpr-font(16px)
    .txt
      margin-left 12px
      dpr-font(14Px)
      color:rgba(85,84,93,1);
      text-overflow ellipsis
      overflow hidden
      white-space nowrap
</style>
